<template>
	<view class="time">
		<image src="@/static/countdown.png" mode=""></image>
		倒计时：{{ countdown }}
	</view>
	<!-- 单选 -->
	<SingleSelect :index="index" @singleSelect="singleSelectEmit" ref="SingleSelect" v-if="type === 'SingleSelect'">
	</SingleSelect>
	<!-- 多选 -->
	<MultiSelect :index="index" @multiSelect="multiSelectEmit" ref="MultiSelect" v-if="type === 'MultiSelect'">
	</MultiSelect>
	<!-- 填空 -->
	<FillInBlanks :index="index" @fillInBlanks="fillInBlanksEmit" ref="FillInBlanks" v-if="type === 'FillInBlanks'">
	</FillInBlanks>
	<!-- 简答 -->
	<ShortAnswer :index="index" @shortAnswer="shortAnswerEmit" ref="ShortAnswer" v-if="type === 'ShortAnswer'">
	</ShortAnswer>
	<!-- 判断 -->
	<TrueOrfalse :index="index" @trueOrfalse="trueOrfalseEmit" ref="TrueOrfalse" v-if="type === 'TrueOrfalse'">
	</TrueOrfalse>


	<view style="width: 100%;;height: 60px;">

	</view>
	<view class="bottom">
		<image class="size" src="@/static/accuracy.png" mode=""></image>
		<image class="size" src="@/static/wrong.png" mode=""></image>
		<view class="app" @click="toPicList">
			<image class="size" src="@/static/app.png" mode=""></image>
			<text @click="toPicList"></text>
		</view>
		<text class="textColor" @click="toResults">交卷</text>
	</view>
	<!-- 	<view style="width: 100%;;height: 10px;background: #fff;">
	
	</view> -->
	<uni-popup ref="popup" type="bottom" background-color="#fff">
		<view class="popupTop">
			<image class="size" src="@/static/accuracy.png" mode=""></image>
			<image class="size" src="@/static/wrong.png" mode=""></image>
			<view class="app" @click="toPicList">
				<image class="size" src="@/static/app.png" mode=""></image>
			</view>
			<text class="textColor" @click="toResults">交卷</text>
		</view>
		<view style="overflow-y: auto;height: 400px;overflow-x: hidden;">
			<!-- 题目编号 -->
			<view v-for="(item,index) in setExam.topic">
				<text class="title">
					{{ item.name }}
				</text>
				<uni-row :gutter="10">
					<uni-col :span="4" v-for="(ite,inx) in item.question" :key="inx">
						<view class="popupBody"
							:class="setExam.answer[`${item.mark}`].result[inx].answer !==  ''? 'questionSuccess' : ''"
							@click="questionIndex(item.mark,inx)">
							{{ inx+1 }}
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view style="width: 100%;height: 60px;">

		</view>
	</uni-popup>
</template>

<script>
	import SingleSelect from "./components/item.vue";
	import ShortAnswer from "./components/shortAnswer.vue";
	import MultiSelect from "./components/multiSelect.vue";
	import TrueOrfalse from "./components/trueOrfalse.vue";
	import FillInBlanks from "./components/fillInBlanks.vue";
	import {
		getPaper,
		submitPaper
	} from '@/api/exam.js';
	import {
		mixin
	} from '@/static/mixin.js'
	import {
		exam
	} from '@/stores/exam.js';
	export default {
		mixins: [mixin],
		onUnload: function() {
			clearInterval(this.countTime);
		},
		onBackPress: function(e) {
			clearInterval(this.countTime);
		},
		created() {
			this.setExam = exam();
		},
		onLoad: function(option) {
			this.result = exam()
			let that = this;
			console.log("传入的id", option.id);
			getPaper({
				id: option.id
			}).then(res => {
				that.paper.paper_id = res.paper_id;
				that.paper.exam_id = res.exam_id;
				that.list = res.paper_data
				console.log(res,"1111111111111111");
				let key = Object.keys(res.paper_data)[0]
				that.type = res.paper_data[key].mark
				this.arr = Object.keys(res.paper_data)
				this.setExam.setTopic(res.paper_data, res.duration)
				// 开启倒计时 倒计时结束自动交卷
				let endtime = new Date(this.setExam.end_time);
				this.countTime = setInterval(() => {
					let now = new Date();
					let second = parseInt((endtime.getTime() - now.getTime()) / 1000); //需要倒计时的时间
					let hour = parseInt(second / 3600 % 24); //时
					let minute = parseInt(second / 60 % 60); //分
					let s = parseInt(second % 60); //秒
					hour < 10 ? hour = "0" + hour : hour;
					minute < 10 ? minute = "0" + minute : minute;
					s < 10 ? s = "0" + s : s;

					that.countdown = hour + ":" + minute + ":" + s;

					if (this.countdown === '00:00:00') {
						this.results();
					}
				}, 1000);
			})
		},
		data() {
			return {
				countTime: '',
				index: '',
				setExam: '',
				type: 'FillInBlanks',
				countdown: '', // 倒计时
				topic: [],
				paper: {
					paper_id: '',
					exam_id: ''
				},
				success: '',
				result: '',
				arr: [],
				list: []
			};
		},
		components: {
			SingleSelect,
			ShortAnswer,
			MultiSelect,
			TrueOrfalse,
			FillInBlanks
		},

		methods: {
			// 切换题目
			questionIndex(mark, index) {
				this.type = mark;
				this.index = index;
				console.log(mark);
				this.$nextTick(() => {
					this.$refs[`${mark}`].init();
				})
				this.$refs.popup.close();
			},
			toPicList() {
				this.$refs.popup.open('bottom')
			},
			// 试卷提交
			toResults() {
				let flag = false
				let that = this
				console.log("this.setExam.answer", this.setExam.answer);


				that.arr.forEach(item => {
					let type = that.list[item].mark;
					console.log(type, "777777777777");
					console.log(this.setExam.answer[type], "444");

					this.setExam.answer[type].result.forEach(item => {
						if (item.answer === '') {
							flag = true;
							return;
						}
					});
				});

				if (!flag) {
					console.log('所有的 item.answer 都不为空');
				} else {
					console.log('存在至少一个 item.answer 为空');
				}


				console.log(this.setExam.answer, "问题");


				// let key = Object.keys(res.paper_data)[0]
				// that.type= res.paper_data[key].mark

				if (flag) {
					uni.showModal({
						content: '题目未做完,禁止交卷',
						showCancel: false,
					})
				} else {
					uni.showModal({
						content: '题目已做完,是否提交',
						success: (res) => {
							if (res.confirm) { // 点击了确定按钮
								let arr = [that.setExam.answer.SingleSelect,
									that.setExam.answer.MultiSelect,
									that.setExam.answer.FillInBlanks,
									that.setExam.answer.ShortAnswer,
									that.setExam.answer.TrueOrfalse,
								]
								submitPaper({
									exam_id: that.paper.exam_id,
									answer_json: JSON.stringify(arr),
									paper_id: that.paper.paper_id,
									start_time: that.setExam.start_time,
									end_time: that.setExam.end_time
								}).then(res => {
									clearInterval(that.countTime);
									uni.reLaunch({
										url: `/pages/exam/results/index?id=${res.exam_log_id}`
									})
								})
							} else if (res.cancel) { // 点击了取消按钮
								// do nothing
							}
						}
					})
				}
			},
			results() {
				let arr = [this.setExam.answer.SingleSelect,
					this.setExam.answer.MultiSelect,
					this.setExam.answer.FillInBlanks,
					this.setExam.answer.ShortAnswer,
					this.setExam.answer.TrueOrfalse,
				]
				submitPaper({
					exam_id: this.paper.exam_id,
					answer_json: JSON.stringify(arr),
					paper_id: this.paper.paper_id,
					start_time: this.setExam.start_time,
					end_time: this.setExam.end_time
				}).then(res => {
					clearInterval(this.countTime);
					uni.reLaunch({
						url: `/pages/exam/results/index?id=${res.exam_log_id}`
					})

				})
			},
			singleSelectEmit(value) {
				if (value === 'next') {
					if (this.setExam.topic.MultiSelect.length != 0) {
						this.type = 'MultiSelect'
					} else if (this.setExam.topic.FillInBlanks.length != 0) {
						this.type = 'FillInBlanks'
					} else if (this.setExam.topic.ShortAnswer.length != 0) {
						this.type = 'ShortAnswer'
					} else if (this.setExam.topic.TrueOrfalse.length != 0) {
						this.type = 'TrueOrfalse'
					}
				}
			},
			multiSelectEmit(value) {
				if (value === 'break') {
					this.type = 'SingleSelect';
					this.$nextTick(() => {
						console.log(this.$refs.SingleSelect.initMax());
					})
				} else {
					if (this.setExam.topic.FillInBlanks.length != 0) {
						this.type = 'FillInBlanks'
					} else if (this.setExam.topic.ShortAnswer.length != 0) {
						this.type = 'ShortAnswer'
					} else if (this.setExam.topic.TrueOrfalse.length != 0) {
						this.type = 'TrueOrfalse'
					}
				}
			},
			fillInBlanksEmit(value) {
				if (value === 'break') {
					if (this.setExam.topic.ShortAnswer != '') {
						if (this.setExam.topic.MultiSelect.length != 0) {
							this.type = 'MultiSelect'
							this.$nextTick(() => {
								console.log(this.$refs.MultiSelect.initMax());
							})
						} else {
							this.type = 'SingleSelect'
							this.$nextTick(() => {
								console.log(this.$refs.SingleSelect.initMax());
							})
						}
					}
				} else {
					if (this.setExam.topic.ShortAnswer != '') {
						if (this.setExam.topic.ShortAnswer.length != 0) {
							this.type = 'ShortAnswer'
						} else {
							this.type = 'TrueOrfalse'
						}
					}
				}
			},
			shortAnswerEmit(value) {
				if (value === 'break') {
					if (this.setExam.topic.FillInBlanks.length != 0) {
						this.type = 'FillInBlanks'
						this.$nextTick(() => {
							console.log(this.$refs.FillInBlanks.initMax());
						})
					} else if (this.setExam.topic.MultiSelect.length != 0) {
						this.type = 'MultiSelect'
						this.$nextTick(() => {
							console.log(this.$refs.MultiSelect.initMax());
						})
					} else if (this.setExam.topic.SingleSelect.length != 0) {
						this.type = 'SingleSelect'
						this.$nextTick(() => {
							console.log(this.$refs.SingleSelect.initMax());
						})
					}
				} else {
					this.type = 'TrueOrfalse';
				}
			},
			trueOrfalseEmit(value) {
				if (value === 'break') {
					if (this.setExam.topic.ShortAnswer.length != 0) {
						this.type = 'ShortAnswer';
						this.$nextTick(() => {
							console.log(this.$refs.ShortAnswer.initMax());
						})
					} else if (this.setExam.topic.FillInBlanks.length != 0) {
						this.type = 'FillInBlanks'
						this.$nextTick(() => {
							console.log(this.$refs.FillInBlanks.initMax());
						})
					} else if (this.setExam.topic.MultiSelect.length != 0) {
						this.type = 'MultiSelect'
						this.$nextTick(() => {
							console.log(this.$refs.MultiSelect.initMax());
						})
					} else if (this.setExam.topic.SingleSelect.length != 0) {
						this.type = 'SingleSelect'
						this.$nextTick(() => {
							console.log(this.$refs.SingleSelect.initMax());
						})
					}


				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.card {
		font-size: 18px;
		border-radius: 5px;
		margin: 20px;
		background-color: #fff;

		.top {
			border-bottom: #e9e9e9 solid 2px;
			padding: 20px;
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 40px;
				height: 30px;
			}
		}

		.cardBody {
			padding: 20px;
		}

		.options {
			border-radius: 5px;
			border: #e1e1e1 1px solid;
			margin-top: 20px;
			padding: 15px;
			padding-left: 0;
		}
	}

	.time {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 60px;
		color: #6b6b6b;

		image {
			margin-right: 5px;
			width: 20px;
			height: 20px;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		padding-bottom: 40px;
		box-sizing: border-box;
		font-size: 19px;
	}

	.popupTop {
		background-color: #fff;
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		font-size: 19px;
		margin-bottom: 20px;
	}

	.questionSuccess {
		background-color: #2aae67;
		border: #2aae67 1px solid;
		color: #fff;
	}

	.popupBody {
		margin-left: 6px;
		margin-right: 6px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		border: $uni-border-color 1px solid;
		// background-color: #6b6b6b;
		border-radius: 50%;
		margin-top: 10px;
	}

	.title {
		display: block;
		width: 100%;
		text-align: center;
	}

	.success {
		border-radius: 5px;
		background-color: #dbeddd;
		border: #78a87f 2px solid;
		margin-top: 10px;
		padding: 15px;
		color: #78a87f;
		padding-left: 0;
	}

	.size {
		width: $uni-img-size-base;
		height: $uni-img-size-base;
	}

	.textColor {
		color: $uni-color-primary;
	}

	.app {
		image {
			vertical-align: bottom;
		}
	}
</style>
